<template>
  <div>
    <!-- 售货列表 -->
    <el-card class="order_card">
      <el-form :model="searchForm" ref="searchRef" inline>
        <el-form-item label="销售单号" prop="orderCode">
          <el-input
            v-model="searchForm.orderCode"
            placeholder="请输入销售单号"
            class="form_input"
          />
        </el-form-item>
        <el-form-item label="客户名称" prop="customerInfo">
          <el-input
            v-model="searchForm.customerInfo"
            placeholder="请输入客户名称"
            class="form_input"
          />
        </el-form-item>
        <el-form-item label="制单时间" prop="startDate">
          <el-date-picker
            v-model="searchForm.startDate"
            type="date"
            placeholder="请选择日期"
            format="YYYY-MM-DD"
            value-format="x"
          />
          <span class="mx-1">——</span>
          <el-date-picker
            v-model="searchForm.endDate"
            type="date"
            placeholder="请选择日期"
            format="YYYY-MM-DD"
            value-format="x"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="Search"
            @click="handleSearch"
            class="btn"
          >
            查询
          </el-button>
          <el-button icon="Refresh" @click="handleReset" class="btn">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="height: calc(100vh - 10.5rem)" class="order_card mt-1">
      <div class="flex justify-end mb-[0.2rem]">
        <el-button type="primary" icon="Plus" class="btn" @click="openDrawer">
          新增
        </el-button>
      </div>

      <el-table :data="tableData" style="height: calc(100vh - 17rem)">
        <el-table-column prop="orderCode" label="销售单号" fixed width="180" />
        <el-table-column
          prop="customerName"
          label="客户名称"
          fixed
          show-overflow-tooltip
        />
        <el-table-column prop="quantity" label="购买数量" />
        <el-table-column label="应收金额" :min-width="80">
          <template #default="{ row }">
            {{ (row.totalAmount / 100).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="discount"
          label="折扣后金额(元)"
          :min-width="120"
        >
          <template #default="{ row }">
            {{ (row.paidAmount / 100).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="paidAmount"
          label="已收金额(元)"
          :min-width="110"
        >
          <template #default="{ row }">
            {{ (row.actualAmount / 100).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="制单时间" width="200">
          <template #default="{ row }">
            {{ $initTime(row.createdAt * 1000, 2) }}
          </template>
        </el-table-column>
        <el-table-column label="是否需要加工" align="center">
          <template #default="{ row }">
            <el-tag type="success" v-if="row.isProcess == 1"> 是 </el-tag>
            <el-tag type="danger" v-else-if="row.isProcess == 2"> 否 </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template #default="{ row }">
            <el-tag type="success" v-if="row.status == 3">
              {{ row.isProcess == 1 ? "已加工" : "已出库" }}
            </el-tag>
            <el-tag type="primary" v-else-if="row.status == 2">
              {{ row.isProcess == 1 ? "待加工" : "待出库" }}
            </el-tag>
            <el-tag type="warning" v-else-if="row.status == 1"> 草稿 </el-tag>
            <el-tag type="danger" v-else-if="row.status == 4"> 已废弃 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          :min-width="100"
          align="center"
          fixed="right"
        >
          <template #default="{ row }">
            <el-dropdown style="margin: 0 auto" trigger="click">
              <el-button type="primary" link>
                <span>更多</span>
                <el-icon><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="detailBtn(row)">
                    <el-button type="primary" link>
                      <el-icon><InfoFilled /></el-icon>详情
                    </el-button>
                  </el-dropdown-item>
                  <!-- <el-dropdown-item v-if="row.status == 3">
                    <el-button type="primary" link>
                      <el-icon><Star /></el-icon>评价
                    </el-button>
                  </el-dropdown-item> -->
                  <el-dropdown-item
                    v-if="row.status == 2"
                    @click="abandonBtn(row.id)"
                  >
                    <el-button type="danger" link>
                      <el-icon><CloseBold /></el-icon>废弃
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="row.status == 2">
                    <el-button type="primary" link
                      ><el-icon><CirclePlusFilled /></el-icon>
                      {{ row.isProcess == 1 ? "加工" : "出库" }}
                    </el-button>
                  </el-dropdown-item>
                  <!-- <el-dropdown-item v-if="row.paidAmount > row.actualAmount">
                    <el-button type="warning" link>
                      <el-icon><MessageBox /></el-icon> 继续付款
                    </el-button>
                  </el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <PagingQuery
        :page="page"
        :pageSize="pageSize"
        :total="total"
        @getList="getList"
        class="mt-[0.5rem]"
      />
    </el-card>

    <!-- 1.详情 -->
    <el-drawer v-model="detail_drawer" destroy-on-close title="详情" size="80%">
      <DetailPage :detailId="detailId" />
    </el-drawer>

    <!-- 2.新增 -->
    <el-drawer v-model="insert_drawer" destroy-on-close title="新增" size="90%">
      <InsertOrder @handleBack="handleInsertBack" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import DetailPage from "./component/DetailPage.vue";
import InsertOrder from "./component/InsertOrder.vue";
import { handleApiResponse } from "@/utils/request.js";
import { GetGlassesStoreOrderList } from "../../../../wailsjs/go/api/GoodsApi.js";
import { DeleteOrderById } from "../../../../wailsjs/go/api/OrderApi.js";

onMounted(() => {
  getList();
});

const searchRef = ref(null);
const searchForm = ref({
  orderCode: "",
  customerInfo: "",
  startDate: null,
  endDate: null,
});
const handleSearch = () => {
  getList();
};
const handleReset = () => {
  searchRef.value.resetFields();
  getList();
};

const tableData = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
async function getList(e) {
  if (e) {
    page.value = e.page;
    pageSize.value = e.pageSize;
  }
  handleApiResponse(() =>
    GetGlassesStoreOrderList({
      page: page.value,
      pageSize: pageSize.value,
      ...searchForm.value,
    })
  ).then((res) => {
    if (res.code == 0) {
      // console.log(res);
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}

// 1.详情
const detail_drawer = ref(false);
const detailId = ref(null); // 0 新增!0 编辑
const detailBtn = (item) => {
  detailId.value = item.id;
  detail_drawer.value = true;
};

// 2.新增
const insert_drawer = ref(false);
const openDrawer = () => {
  insert_drawer.value = true;
};
const handleInsertBack = (val) => {
  if (val == 1) {
    getList();
  }
  insert_drawer.value = false;
};

// 3.废弃
const abandonBtn = (id) => {
  ElMessageBox.confirm("确定要废弃该订单吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    handleApiResponse(() => DeleteOrderById({ id })).then((res) => {
      if (res.code == 0) {
        ElMessage.success("废弃成功");
        getList();
      }
    });
  });
};
</script>

<style scoped lang="scss">
.order_card :deep(.el-card__body) {
  @apply px-[0.5rem] py-[0.5rem];
}
.order_card :deep(.el-form-item) {
  margin-bottom: 0.5rem;
}
.form_input {
  @apply w-[7rem];
}
.btn {
  @apply w-[4.5rem];
}
</style>